<template>
  <el-drawer
    :visible.sync="show"
    direction="rtl"
    :wrapperClosable="false"
    :before-close="beforeClose"
    size="550px"
  >
    <template #title>
      <h2 style="margin: 0; color: #333">
        {{ isEdit ? '修改菜单' : '添加菜单' }}
      </h2>
    </template>

    <div style="padding: 20px; border-top: 1px solid #eee">
      <el-form :model="formData" :rules="rules" ref="formRef" label-width="80px" size="medium">
        <el-form-item label="菜单类型" prop="type">
          <el-radio-group v-model="formData.type" :disabled="isEdit">
            <el-radio border label="0">目录</el-radio>
            <el-radio border label="1">菜单</el-radio>
            <el-radio border label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="父级菜单" prop="parentTitle">
          <el-input
            ref="parentRef"
            :disabled="isEdit"
            v-model="formData.parentTitle"
            placeholder="选择父级菜单"
            @focus="parentFocus"
          ></el-input>
        </el-form-item>
        <el-form-item label="显示标题" prop="title">
          <el-input v-model="formData.title" placeholder="请输入显示标题"></el-input>
        </el-form-item>
        <el-form-item label="路由名称" prop="name" v-if="formData.type !== '2'">
          <el-input v-model="formData.name" placeholder="请输入路由名称"></el-input>
        </el-form-item>
        <el-form-item label="访问路径" prop="path" v-if="formData.type !== '2'">
          <el-input v-model="formData.path" placeholder="请输入访问路径"></el-input>
        </el-form-item>
        <el-form-item label="组件路径" prop="component" v-if="formData.type === '1'">
          <el-input v-model="formData.component" placeholder="请输入组件路径"></el-input>
        </el-form-item>
        <el-form-item label="权限字段" prop="permissionCode">
          <el-input v-model="formData.permissionCode" placeholder="请输入权限字段"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon" v-if="formData.type !== '2'">
          <el-input v-model="formData.icon" placeholder="请填写图标类名"></el-input>
        </el-form-item>
        <el-form-item label="菜单排序" prop="orderNum">
          <el-input v-model="formData.orderNum" placeholder="请输入排序"></el-input>
        </el-form-item>
        <el-form-item label="菜单备注" prop="remark">
          <el-input
            type="textarea"
            v-model="formData.remark"
            placeholder="请输入备注"
            rows="3"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align: right">
        <el-button type="danger" plain @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </div>

    <el-drawer
      custom-class="select-parent"
      title="选择父级菜单"
      size="450px"
      :wrapperClosable="false"
      :append-to-body="true"
      :before-close="handleInnerClose"
      :visible.sync="innerDrawerShow"
    >
      <div class="select-parent__content">
        <el-tree
          ref="parentTreeRef"
          :indent="24"
          node-key="menuId"
          :data="treeData"
          highlight-current
          default-expand-all
          :props="defaultProps"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        >
          <div slot-scope="{ node, data }">
            <span v-if="!data.children || !data.children.length" class="icon el-icon-menu"></span>
            <span class="icon" v-else @click.stop="handleIconClick(data)">
              <i v-if="isOpen(data)" class="el-icon-remove-outline"></i>
              <i v-else class="el-icon-circle-plus-outline"></i>
            </span>
            <span>{{ data.title }}</span>
          </div>
        </el-tree>
      </div>
    </el-drawer>
  </el-drawer>
</template>

<script>
import { addMenuApi, updateMenuApi } from '@/api/menu'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    editRow: {
      type: Object,
      default: () => ({})
    },
    treeData: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    isEdit() {
      return !!this.editRow.menuId
    },
    isOpen() {
      this.action
      return function (data) {
        return this.$refs.parentTreeRef?.store.nodesMap[data.menuId].expanded
      }
    }
  },
  watch: {
    show(value) {
      if (value && this.editRow.menuId) {
        this.formData = { ...this.editRow }
      }
    }
  },
  data() {
    return {
      action: false,
      rules: {
        type: [{ required: true, message: '请选择菜单类型', trigger: 'change' }],
        title: [{ required: true, message: '请输入显示标题', trigger: 'change' }],
        name: [{ required: true, message: '请输入路由名称', trigger: 'change' }],
        icon: [{ required: true, message: '请选择图标', trigger: 'change' }],
        path: [{ required: true, message: '请输入访问路径', trigger: 'change' }],
        component: [{ required: true, message: '请输入组件路径', trigger: 'change' }],
        permissionCode: [{ required: true, message: '请输入权限字段', trigger: 'change' }],
        orderNum: [{ required: true, message: '请输入排序', trigger: 'change' }]
      },
      formData: {
        menuId: null,
        parentId: null,
        parentTitle: '',
        type: '',
        title: '',
        name: '',
        path: '',
        component: '',
        permissionCode: '',
        icon: '',
        orderNum: '',
        remark: ''
      },
      innerDrawerShow: false,
      defaultProps: {
        children: 'children',
        label: 'title',
        disabled: 'disabled'
      }
    }
  },
  methods: {
    handleIconClick(data) {
      this.$refs.parentTreeRef.store.nodesMap[data.menuId].expanded =
        !this.$refs.parentTreeRef.store.nodesMap[data.menuId].expanded
    },
    // 提交表单
    submitForm() {
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          let res
          if (this.isEdit) {
            res = await updateMenuApi(this.formData)
          } else {
            res = await addMenuApi(this.formData)
          }
          if (res.success) {
            this.$message.success(this.isEdit ? '修改成功！' : '添加成功！')
            // 关闭弹窗
            this.beforeClose()
            this.$emit('close', { update: true })
          }
        }
      })
    },
    parentFocus() {
      this.$refs.parentRef.blur()
      this.innerDrawerShow = true
      this.$nextTick(() => {
        this.action = !this.action
      })
    },
    innerConfirm() {
      this.innerDrawerShow = false
    },
    handleInnerClose() {
      this.innerDrawerShow = false
    },
    handleNodeClick(data) {
      if (this.isEdit && data.menuId === this.editRow.menuId) {
        this.$message.error('不能选择自身作为父级，请重新选择！')
        return
      }
      console.log(this.editRow)

      this.formData.parentId = data.menuId
      this.formData.parentTitle = data.title
      this.innerDrawerShow = false
    },
    closeDialog() {
      this.beforeClose()
      this.$emit('close', { update: false })
    },
    beforeClose() {
      this.$emit('update:show', false)
      this.$emit('reset')
      this.resetForm()
      this.$nextTick(() => {
        this.$refs.formRef.clearValidate()
      })
    },
    // 重置表单
    resetForm() {
      this.formData = { ...this.$options.data().formData }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-radio {
  margin-right: 0;
}
::v-deep .select-parent {
  .el-drawer__header {
    color: #333;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .select-parent__content {
    padding: 15px;
    border-top: 1px solid #eee;

    .el-tree {
      .icon {
        margin: 0 5px 0 5px;
        font-size: 18px !important;
        color: #1989fa;
      }
      .el-tree-node {
        position: relative;
        padding-left: 10px;
      }

      .el-tree-node__children {
        padding-left: 25px;
      }

      .el-tree-node :last-child::before {
        height: 40px;
      }

      .el-tree > .el-tree-node:before {
        border-left: none;
      }

      .el-tree > .el-tree-node:after {
        border-top: none;
      }

      .el-tree-node:before,
      .el-tree-node:after {
        content: '';
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
      }

      .el-tree-node:before {
        border-left: 2px dotted #1989fa;
        bottom: 0px;
        height: 99%;
        top: -25px;
        width: 1px;
      }

      .el-tree-node:after {
        border-top: 2px dotted #1989fa;
        left: 1px;
        height: 20px;
        top: 14px;
        width: 24px;
      }

      .el-tree-node__expand-icon.is-leaf {
        width: 8px;
      }

      .el-tree-node__content > .el-tree-node__expand-icon {
        display: none;
      }

      .el-tree-node__content {
        line-height: 30px;
        height: 30px;
        padding-left: 10px !important;
      }
    }

    .el-tree > div {
      &::before,
      &::after {
        display: none;
      }
    }
  }

  .el-tree-node__content {
    height: 30px;
    .el-tree-node__label {
      display: inline-block;
      font-size: 16px;
      line-height: 30px;
      color: #333;
    }
  }
}
</style>
